<template>
    <div>
        <a-button type="primary" @click="showDrawer"> {{btnName}} </a-button>
        <a-drawer
          title="编辑资源"
          width="520"
          :closable="false"
          :visible="visible"
          @close="onClose"
        >
            <div class="top">
                <img src="@/assets/imgs/repository/java.jpeg" alt="" class="poster" />
                <div class="titlt">java开发</div>
            </div>
            <a-divider />
            <div class="content">
                <div class="titlt"><strong>资源详情</strong></div>
                <div class="uploader distance">
                    <span>上&nbsp;&nbsp;传&nbsp;者:</span>
                    <span>张三</span>
                </div>
                <div class="name distance">
                    <span>名&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;称:</span>
                    <a-input placeholder="Basic usage" value='java开发'/>
                </div>
                <div class="special distance">
                    <span>专&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;题:</span>
                    <a-select default-value="后端开发">
                        <a-select-option value="前端开发"> 前端开发 </a-select-option>
                        <a-select-option value="后端开发"> 后端开发 </a-select-option>
                        <a-select-option value="学习心得"> 学习心得 </a-select-option>
                        <a-select-option value="职业路线"> 职业路线 </a-select-option>
                    </a-select>
                </div>
                <div class="uploadTime distance">
                    <span>上传时间:</span>
                    <span>2022-3-30</span>
                </div>
                <div class="domType distance">
                    <span>文件类型:</span>
                    <a-select default-value="图文">
                        <a-select-option value="图文"> 图文 </a-select-option>
                        <a-select-option value="视频"> 视频 </a-select-option>
                        <a-select-option value="音频"> 音频 </a-select-option>
                    </a-select>
                </div>
                <div class="describe distance">
                    <span>文字描述:</span>
                    <a-textarea placeholder="Basic usage" :rows="3" />
                </div>
                <div class="poster distance">
                    <span>海&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;报:</span>
                    <div class="clearfix">
                        <a-upload
                          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
                          list-type="picture-card"
                          :file-list="fileList"
                          @preview="handlePreview"
                          @change="handleChange"
                        >
                            <div v-if="fileList.length < 8">
                                <a-icon type="plus" />
                                <div class="ant-upload-text">Upload</div>
                            </div>
                        </a-upload>
                        <a-modal
                          :visible="previewVisible"
                          :footer="null"
                          @cancel="handleCancel"
                        >
                            <img alt="example" style="width: 100%" :src="previewImage" />
                        </a-modal>
                    </div>
                </div>
                <div class="permissions distance">
                    <span>权&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;限:</span>
                    <a-radio-group v-model="value" @change="onChange">
                        <a-radio :value="1"> 全体成员 </a-radio>
                        <a-radio :value="2"> 内部成员 </a-radio>
                    </a-radio-group>
                </div>
            </div>
            <div
              :style="{
                position: 'absolute',
                bottom: 0,
                width: '100%',
                borderTop: '1px solid #e8e8e8',
                padding: '10px 16px',
                textAlign: 'right',
                left: 0,
                background: '#fff',
                borderRadius: '0 0 4px 4px',
              }"
            >
                <a-button style="marginright: 8px" @click="onClose"> 保存 </a-button>
                <a-button type="primary" @click="onClose"> 取消 </a-button>
            </div>
        </a-drawer>
    </div>
</template>
<script>
import reqwest from "reqwest";
function getBase64(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
    });
}
export default {
    props: ['btnName'],
    data() {
        return {
            visible: false,
            childrenDrawer: false,
            previewVisible: false,
            previewImage: "",
            fileList: [
                {
                    uid: "-1",
                    name: "image.png",
                    status: "done",
                    url: "https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png",
                },
            ],
            value: 1,
        };
    },
    methods: {
        showDrawer() {
            this.visible = true;
        },
        onClose() {
            this.visible = false;
        },
        showChildrenDrawer() {
            this.childrenDrawer = true;
        },
        onChildrenDrawerClose() {
            this.childrenDrawer = false;
        },

        handleCancel() {
            this.previewVisible = false;
        },
        async handlePreview(file) {
            if (!file.url && !file.preview) {
                file.preview = await getBase64(file.originFileObj);
            }
            this.previewImage = file.url || file.preview;
            this.previewVisible = true;
        },
        handleChange({ fileList }) {
            this.fileList = fileList;
        },
    },
};
</script>
<style lang='scss' scoped>
.top {
  display: flex;
  align-items: center;
  .poster {
    width: 100px;
    height: 50px;
    margin-right: 50px;
  }
}
.content {
  .titlt {
      margin-bottom: 5px;
  }
  span {
    margin-right: 10px;
  }
  .distance {
    margin-bottom: 10px;
  }
  .name {
    display: flex;
    align-items: center;
    .ant-input {
      width: 200px;
    }
  }
  .ant-select {
    width: 200px !important;
  }
}
</style>